<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页和标签</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
<nav>
    <ul class="pagination pagination-lg">
        <li class="disabled"><a href="#">&laquo;</a> </li>
        <li><a href="#">1</a> </li>
        <li><a href="#">2</a> </li>
        <li><a href="#">3</a> </li>
        <li><a href="#">4</a> </li>
        <li><a href="#">&raquo;</a> </li>
    </ul>
</nav>
<nav>
    <ul class="pagination">
        <li><a href="#">&laquo;</a> </li>
        <li><a href="#">1</a> </li>
        <li><a href="#">2</a> </li>
        <li><a href="#">3</a> </li>
        <li><a href="#">4</a> </li>
        <li><a href="#">&raquo;</a> </li>
    </ul>
</nav>
<nav>
    <ul class="pagination pagination-sm">
        <li><a href="#">&laquo;</a> </li>
        <li><a href="#">1</a> </li>
        <li><a href="#">2</a> </li>
        <li><a href="#">3</a> </li>
        <li><a href="#">4</a> </li>
        <li><a href="#">&raquo;</a> </li>
    </ul>
</nav>

<nav>
    <ul class="pager">
        <li><a href="#">上一页</a> </li>
        <li><a href="#">下一页</a> </li>
    </ul>
</nav>
<nav>
    <ul class="pager">
        <li class="previous"><a href="#">向前</a> </li>
        <li class="next"><a href="#">向后</a> </li>
    </ul>
</nav>

<span class="label label-default">default</span>
<span class="label label-info">info</span>
<span class="label label-danger">danger</span>
<span class="label label-success">success</span>
<span class="label label-warning">warning</span>

<h4>大标题<span class="label label-default">小标题</span> </h4>
</body>
</html>